<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>灯的开关示例</title>
    <script src="js/vue.js"></script>
    <style>
        img {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="lightOn = !lightOn"> {{ lightOn ? '关灯' : '开灯' }} </button>
        <br>
        <img :src="lightOn ? 'img/on.jpg' : 'img/off.jpg'" alt="灯泡">
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    lightOn: true // 初始状态为开灯
                }
            }
        }).mount('#app');
    </script>
</body>
</html>